<template>
  <div class="external-score">
    <Nav
      backTitle="输入成绩"
      :backFn="backFn"
    />
    <div class="student-name">
      学员：{{name}}
    </div>
    <div>
      <input
        v-if="externalScoreType === '1'"
        class="list-input"
        type="text"
        placeholder="请输入中考单科分数"
        v-model="score"
      />
      <input
        v-if="externalScoreType === '2'"
        class="list-input"
        type="text"
        placeholder="卓越全市初三学业诊断名次"
        v-model="score"
      />
    </div>
    <div class="info">
      温馨提示：请按实际成绩进行录入，若经校区发现成绩不属实，校区有权取消您本次的报名资格。谢谢！
    </div>
    <div
      @click="handleConfirm"
      class="confirm"
    >确认</div>
  </div>
</template>

<script>
import Nav from 'components/nav/nav.vue'
import api from 'util/xhr'
export default {
  components: {
    Nav
  },
  data() {
    return {
      name: '',
      score: '',
      externalScoreType: ''
    }
  },
  created() {
    this.name = this.$route.query.name
    this.onlineTestId = this.$route.query.onlineTestId
    this.externalScoreType = this.$route.query.externalScoreType
  },
  methods: {
    handleConfirm() {
      if (!this.score) {
        if (this.externalScoreType === '1') {
          this.$alert({content:'请输入中考单科分数'})
        }
        if (this.externalScoreType === '2') {
          this.$alert({content:'请输入卓越全市初三学业诊断名次'})
        }
        return
      }
      api
        .post('/api/m/saveExternalScore', {
          onlineTestId: this.onlineTestId,
          score: this.score
        })
        .then(data => {
          this.backFn()
        },(desc)=>{
            this.$alert({content: desc})
        })
    },
    backFn() {
      this.$router.push('/assessment')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.external-score {
  padding-top: 110px;
  background: #f8f8f8;
  height: 100%;
}
.student-name {
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
  background: #fff;
  padding: 0 45px;
}
.info {
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
  padding: 0 45px;
  margin-top: 30px;
}
.external-score input {
  font-size: 32px;
  color: #999;
  height: 100px;
  padding: 0 45px;
  width: 100%;
  border: 0;
  outline: none;
}
.confirm {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  line-height: 88px;
  color: white;
  font-size: 36px;
  background: #47c2c9;
  text-align: center;
}
</style>
